import React from "react";
import "../css/InputBox.css";
import {PENDDING} from "./config";

class InputBox extends React.Component{
    constructor(props) {
        super(props)
    }
    render(){
      return(
          <div className="input_box_container">
              <div className="input_box_wrapper">
                  <div className="input_size">TO DO LIST</div>
                  <div>
                      <input ref="todoInput"/>
                  </div>
                 <button onClick={()=>{
                     var value=this.refs.todoInput.value;
                    //  容错
                    if(value.length===0){
                        alert("不能为空哦！");
                        return;
                    }
                    var todo = {
                        content:value,
                        status:PENDDING//未经定义的魔法值
                      }
                      this.props.addTodo(todo)
                 }}>+</button>
              </div>
          </div>
      )
    }

}
export default InputBox;